<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript" src="js/jquery.itextclear.js"></script>
<script type="text/javascript" src="${ctx}/js/global_util.js"></script>
<link rel="stylesheet" media="screen" href="css/docs.css"/>
<link rel="stylesheet" media="screen" href="lib/jqplot/jquery.jqplot.min.css"/>
<!-- jQplot SETUP -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/jqplot/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.bubbleRenderer.min.js"></script>
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css"/>




<script type="text/javascript">
    $(document).ready(function(){
        //pie chart
        //var total = [['薪资低', 57],['公司福利差', 12],['工作环境不如意', 12],['公司福利差', 12],['不满公司的政策和措施', 12],['没有事业发展机会', 12],['缺少培训和机会', 12],['工作量太少', 12]];
        //var total = [['薪资低', 4],['公司福利差', 3],['工作环境不如意', 2],['公司福利差', 1],['不满公司的政策和措施', 1],['没有事业发展机会', 1],['缺少培训和机会', 1],['工作量太少', 1]];
        //drawReasonChart("chart5", total)
    });
    function drawLastFiveMonthChart(profits, expenses, tickslabel){
        //var profits = [100,60, 59,93,46];
        //var expenses = [82,46, 51,93,1];
        //var tickslabel = ['一月', '二月', '三月', '四月','五月'];
        var ylabel=['Profits','Expenses'];

        //bar chart
        var chart3 = $.jqplot('chart3',[profits,expenses],{
            title:"最近5个月男女离职数量分析图",
            seriesDefaults: {
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },

            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: tickslabel
                },
                yaxis:{
                    tickOptions:{
                        formatString:'%.0f人'
                    }
                }
            }
        });

        $('#chart3').bind('jqplotDataHighlight',
                function (ev, seriesIndex, pointIndex, data) { $('#info1').html(tickslabel[seriesIndex] + ' - '+ data[1] ); }
        );
        $('#chart3').bind('jqplotDataClick',
                function (ev, seriesIndex, pointIndex, data) { $('#info2').html(tickslabel[seriesIndex] + ' - '+ data[1]); }
        );
        $('#chart3').bind('jqplotDataUnhighlight',
                function (ev) { $('#info1').html(''); }
        );
    }

    function drawReasonChart(eid, data){
        //var chart5 = jQuery.jqplot ('chart5', [total], {
        var chart5 = jQuery.jqplot (eid, [data], {
            title:'离职原因分析',
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer,
                rendererOptions: { showDataLabels: true }
            },
            legend: { show:true, location: 'e' }
        });
    }
</script>
<!-- jQplot SETUP END -->

<h1 class="page-title">员工离职分析管理</h1>
<div class="container_12 clearfix leading">

<section class="tabs grid_12 leading">
<ul class="clearfix" id="tab_ul">
    <s:iterator value="#request.organizations" var="orgs" status="st">
        <s:if test="#request.orgs.id == #request.organizationId">
            <li><a id="tab_${orgs.id}" href="javascript:void(0)" class="current">${orgs.fullName}</a></li>
        </s:if>
        <s:else>
            <li><a id="tab_${orgs.id}" href="javascript:void(0)" onclick="window.location.href='#leave/analysis-main.xhtml?organizationId=${orgs.id}'">${orgs.fullName}</a></li>
        </s:else>
    </s:iterator>
</ul>
<section>
<section class="clearfix" style="display: block;">
<header class="grid_12 alpha omega"> </header>
<%@include file="/WEB-INF/pages/common/common_choice_bar.jsp"%>

<div class="grid_4" style=" margin-left:2%; width:46%">
    <div class="jqPlot" id="chart5" style="width:100%;height:220px;"></div>
</div>

<div class="grid_4" style="margin-left:2%; width:46%">
    <div class="jqPlot" id="chart3" style="width:100%;height:220px;"></div>
</div>

<div class="portlet grid_6 leading">
    <header>
        <h2>离职人数排行榜</h2>
    </header>

    <section>
        <table class="full">
            <tbody>
            <tr>
                <td height="31px;">部门离职人数(天)</td>
                <td class="ar"><a href="#" id="number_day">3</a></td>
                <td class="ar" id="organization_day">生产2组</td>
            </tr>
            <tr>
                <td height="32px;">部门离职人数(周)</td>
                <td class="ar"><a href="#" id="number_week">7</a></td>
                <td class="ar" id="organization_week">采购1组</td>
            </tr>
            <tr>
                <td height="32px;">部门离职人数(月)</td>
                <td class="ar"><a href="#" id="number_month">12</a></td>
                <td class="ar" id="organization_month">行政部</td>
            </tr>
            <tr>
                <td height="32px;">部门离职人数(季)</td>
                <td class="ar"><a href="#" id="number_season">25</a></td>
                <td class="ar" id="organization_season">采购2组</td>
            </tr>

            <tr>
                <td height="31px">部门离职人数(年)</td>
                <td class="ar"><a href="#" id="number_year">26</a></td>
                <td class="ar" id="organization_year">采购2组</td>
            </tr>
            </tbody>
        </table>
    </section>
</div>



<div class="portlet grid_6 leading">
    <header>
        <h2>离职人数占比预警: <a href="#">30</a></h2>
    </header>
    <section>
        <table class="full">
            <tbody id="ratio_rank_data_tbody">
            <tr>
                <td>采购2组</td>
                <td style="width:70%"><div id="progress1" class="progress"><span style="width: 50%;"><b>50%</b></span></div></td>
                <td style="width:40px" class="ar">15/30</td>
            </tr>

            <tr>
                <td>行政部</td>
                <td><div class="progress"><span style="width: 10%;"><b>10%</b></span></div></td>
                <td class="ar">3/30</td>
            </tr>
            <tr>
                <td>生产2组</td>
                <td><div class="progress"><span style="width: 6%;"><b>6%</b></span></div></td>
                <td class="ar">2/30</td>
            </tr>
            <tr>
                <td>采购3组</td>
                <td><div class="progress"><span style="width: 16%;"><b>16%</b></span></div></td>
                <td class="ar">5/30</td>
            </tr>
            <tr>
                <td>行政部</td>
                <td><div class="progress"><span style="width: 16%;"><b>16%</b></span></div></td>
                <td class="ar">5/30</td>
            </tr>
            </tbody>
        </table>
    </section>
</div>
</section>

</section>
</section>

<div class="tabs side grid_12 leading">
    <div class="clear"></div>
</div>
</div>



<div class="container_12 clearfix leading" style="margin-bottom:0px">
    <div class="tabs side grid_12 leading">
        <div class="clear"></div>
    </div>
</div>
<div class="clear"></div>

<script type="text/javascript">
    $(function(){
        setTimeout('init()', 800);
    });
    function init(){
        doSearch({"year":"${year}", "month":"${month}", "organizationId":"${organizationId}"});
        setCurrent();
    }
    function setCurrent(){
        $("#tab_ul").find("a").removeClass("current");
        $("#tab_${organizationId}").addClass("current")
    }

    function doSearch(searchFromData){
        searchReasonChart(searchFromData);
        searchLastFiveMonthChart(searchFromData);
        searchLeaveOfficeNumberRank(searchFromData);
        searchLeaveOfficeRatioRank(searchFromData);
    }

    //查找离职原因饼图
    function searchReasonChart(searchFromData){
        var url = "${ctx}/ajax/analysis-reason-chart.xhtml";
        $.ajax(url, {
            type:"POST",
            data:searchFromData,
            dataType:"json",
            cache:false,
            success:function (data) {
                if(data != null && data.length > 0){
                    var length = Math.min(8, data.length);
                    var total = new Array();
                    for(var i=0; i<length; i++){
                        //total = [['薪资低', 57],['公司福利差', 12],['工作环境不如意', 12],['公司福利差', 12],['不满公司的政策和措施', 12],['没有事业发展机会', 12],['缺少培训和机会', 12],['工作量太少', 12]];
                        var item = new Array();
                        item.push("'"+data[i][1]+"'");
                        item.push(data[i][0]);
                        total.push(item);
                    }
                    drawReasonChart('chart5', total);
                }else{
                    drawReasonChart('chart5', [['没有离职', 1]]);
                }
            },
            complete:function () {
            }
        });
    }
    //查找最近5个月离职男女分析图
    function searchLastFiveMonthChart(searchFromData){
        var url = "${ctx}/ajax/analysis-last-five-monty-chart.xhtml";
        $.ajax(url, {
            type:"POST",
            data:searchFromData,
            dataType:"json",
            cache:false,
            success:function (data) {
                if(data != null && data.length > 0){
                    //var profits = [100,60, 59,93,46];
                    //var expenses = [82,46, 51,93,1];
                    //var tickslabel = ['一月', '二月', '三月', '四月','五月'];*
                    //drawLastFiveMonthChart(profits, expenses, tickslabel)
                    drawLastFiveMonthChart(data[1], data[2], data[0])
                }else{
                }
            },
            complete:function () {
            }
        });
    }

    //查找离职人数排行榜
    function searchLeaveOfficeNumberRank(searchFromData){
        var url = "${ctx}/ajax/analysis-number-rank.xhtml";
        $.ajax(url, {
            type:"POST",
            data:searchFromData,
            dataType:"json",
            cache:false,
            success:function (data) {
                if(data != null && data.length > 0){
                    $("#number_day").html(data[0][0]);
                    $("#organization_day").html(data[0][1]);
                    $("#number_week").html(data[1][0]);
                    $("#organization_week").html(data[1][1]);
                    $("#number_month").html(data[2][0]);
                    $("#organization_month").html(data[2][1]);
                    $("#number_season").html(data[3][0]);
                    $("#organization_season").html(data[3][1]);
                    $("#number_year").html(data[4][0]);
                    $("#organization_year").html(data[4][1]);
                }else{
                }
            },
            complete:function () {
            }
        });
    }

    //查找离职比率排行榜
    function searchLeaveOfficeRatioRank(searchFromData){
        var url = "${ctx}/ajax/analysis-ratio-rank.xhtml";
        $.ajax(url, {
            type:"POST",
            data:searchFromData,
            dataType:"json",
            cache:false,
            success:function (data) {
                var tempStr = "";
                if(data != null && data.length > 0){
                    var min = Math.min(data.length, 6);
                    for(var i=0; i<min; i++){
                        var d = data[i]; //2,技术部,3,27,0.1111111111111111,11.11%
                        tempStr += ''+
                                '<tr>'+
                                    '<td>'+d[1]+'</td>'+
                                    '<td style="width:70%"><div id="progress1" class="progress"><span style="width: '+d[5]+';"><b>'+d[5]+'</b></span></div></td>'+
                                    '<td style="width:40px" class="ar">'+d[2]+'/'+d[3]+'</td>'+
                                '</tr>'
                    }
                }
                $("#ratio_rank_data_tbody").html(tempStr);
            },
            complete:function () {
            }
        });
    }
</script>